/* eslint-disable import/no-anonymous-default-export */
import React,{useState,useEffect}from 'react'
import { Button, Input, Form } from 'react-vant'
import {useNavigate} from "react-router-dom"
export default () => {
  const [form] = Form.useForm()
  const navigate = useNavigate()
  const [show,setShow] = useState(false)
  const onFinish = (values: any) => {
    console.log(values)
    window.localStorage.setItem("token",JSON.stringify(values))
    navigate("/")
  }

  const get_code = (e:any) => {
    let time = 60 
    setShow(true)
    console.log(e);
    let timer = setInterval(()=>{
      time -- 
      e.target.innerHTML = `${time} 发送验证码`
      if (time<=0) {
        setShow(false)
        clearInterval(timer)
        e.target.innerHTML = "重新获取"
      }
    },1000)
  }

  return (
    <Form
      form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: '16px 16px 0' }}>
          <Button round nativeType='submit' type='primary' block>
            提交
          </Button>
        </div>
      }
    >
      <Form.Item
        tooltip={{
          message:
            'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
        }}
        intro='确保这是唯一的用户名'
        rules={[{ required: true, message: '请填写用户名' }]}
        name='username'
        label='用户名'
      >
        <Input placeholder='请输入用户名' />
      </Form.Item>
      <Form.Item
        rules={[{ required: true, message: '请填写密码' }]}
        name='password'
        label='密码'
      >
        <Input placeholder='请输入密码' />
      </Form.Item>
      <Form.Item
        // rules={[{ required: true, message: '验证码' }]}
        name='code'
        label='验证码'
      >
        <Input placeholder='请输入验证码' /> 
       
      </Form.Item>
      <Button disabled={show} onClick={(e)=>get_code(e)}>获取验证码</Button>
    </Form>
  )
}
